<template>
    <div class="wrap">
        <div class="top">
            <div class="sel-data">
                <div :class="queryData.memberType == 1 ? 'js active' : 'js'" @click="changeType(1)">
                    教师上课数据
                </div>
                <div :class="queryData.memberType == 0 ? 'xs active' : 'xs'" @click="changeType(0)">
                    学生上课数据
                </div>
            </div>
            <div class="xyname" v-if="tenantId == 1">学校名称</div>
            <div class="xysearch" v-if="tenantId == 1">
                <el-select v-model="queryData.schoolId" class="custom-input h-160"
                           placeholder="请选择学校查看" @change="changeSchool">
                    <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
            </div>
            <div class="ssdq" v-if="tenantId == 1">所属省份</div>
            <div class="dqsearch" v-if="tenantId == 1">
                <el-select v-model="queryData.province" class="custom-input h-160" placeholder="请选择省份" filterable
                           default-first-option @change="reloadPageData" clearable>
                    <el-option v-for="item in regionData" :label="item.label" :value="item.label"/>
                </el-select>
            </div>
            <div class="sel-grade" v-show="queryData?.memberType == 0">
                <div :class="queryData.grade == 0 ? 'grade active' : 'grade'"
                     style="border-radius: 4px 0 0 4px;" @click="changeGrade(0)">全部
                </div>
                <div :class="queryData.grade == 1 ? 'grade active' : 'grade'" @click="changeGrade(1)">大一
                </div>
                <div :class="queryData.grade == 2 ? 'grade active' : 'grade'" @click="changeGrade(2)">大二
                </div>
                <div :class="queryData.grade == 3 ? 'grade active' : 'grade'" @click="changeGrade(3)">大三
                </div>
                <div :class="queryData.grade == 4 ? 'grade active' : 'grade'" @click="changeGrade(4)"
                     style="border-right: 1rem solid #A3D0FD;border-radius: 0 4px 4px 0;">大四
                </div>
            </div>
        </div>
        <div class="middle">
            <!-- 专业数据 -->
            <div class="zysj">
                <div class="zytitle">{{ sfText }}专业数据</div>
                <div class="zynum">{{ sfText }}总数：<span>{{ zyCount }}人</span></div>
                <div ref="zysjChart" class="zysj-chart"></div>
            </div>
            <!-- 课程统计 -->
            <div class="kctj">
                <div class="zytitle">{{ sfText }}课程统计 (周)</div>
                <div ref="kcsjChart" class="kctj-chart"></div>
            </div>
        </div>
        <!-- 列表数据 -->
        <div class="bottom">
            <div class="btitle">{{ sfText }}列表</div>
            <div class="btlist">
                <div class="btlist-wrap">
                    <div class="zy-list">
                        <div class="zy-warp">
                            <div v-for="(item, index) in  majors " :key="index"
                             :class="queryData.majorId == item.id ? `item active` : `item`"
                             @click="changeMajor(item)">
                            {{ item.name }}
                        </div>
                        </div>
                    </div>
                    <div class="data-list">
                        <el-table v-if="queryData.memberType == 1" :data="listData"
                                  style="width: 100%;border:none;"
                                  :row-style="rowState" :header-row-style="headerRowStyle"
                                  :header-cell-style="headerRowStyle"
                                  :cell-style="rowCellStyle">
                            <el-table-column prop="name" align="center" label="教师姓名" width="200"/>
                            <el-table-column prop="code" align="center" label="工号" width="200"/>
                            <el-table-column prop="majorName" align="center" label="专业" width="200"/>
                            <el-table-column prop="courseCount" align="center" label="上课数量" width="200"/>
                            <el-table-column prop="summaryCount" align="center" label="课后总结数量" width="200"/>
                            <el-table-column fixed="right" align="center" label="操作">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                               @click="router.push('/yxt/teacher/detail/'+scope.row.id)">查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-else :data="listData"
                                  style="width: 100%;border:none;"
                                  :row-style="rowState" :header-row-style="headerRowStyle"
                                  :header-cell-style="headerRowStyle"
                                  :cell-style="rowCellStyle">
                            <el-table-column prop="name" align="center" label="学生姓名" width="180"/>
                            <el-table-column prop="code" align="center" label="学号" width="180"/>
                            <el-table-column prop="grade" align="center" label="年级" width="180">
                                <template #default="scope">
                                    {{ getTermLabel(scope.row.grade, scope.row.term) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="majorName" align="center" label="专业" width="180"/>
                            <el-table-column prop="courseCount" align="center" label="上课数量" width="180"/>
                            <el-table-column fixed="right" align="center" label="操作">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                               @click="router.push('/yxt/student/detail/'+scope.row.id)">查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="bottom-page">
                    <el-pagination v-model:current-page="queryData.pageNo"
                                   v-model:page-size="queryData.pageSize"
                                   :page-sizes="[20, 30, 40, 50]"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {useSchoolApi} from "@/api/yxt/school";
import {useCourseApi} from "@/api/yxt/dashboard";
import {union} from "lodash-es";
import {getTenantId} from "@/utils/auth";
import router from "@/router";
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import "dayjs/locale/zh-cn";
import {regionData} from "element-china-area-data";
// config dayjs
dayjs.extend(weekday);
dayjs.locale("zh-cn");

defineOptions({name: 'CourseData'})

const schoolApi = useSchoolApi();
const courseApi = useCourseApi();

const tenantId = getTenantId();

const total = ref<number>(0)
//查询参数
const queryData = ref<any>({
    memberType: 1,              // 数据身份 1:教师 0:学生
    schoolId: undefined,        // 选择学校
    province: "",               // 选择省份
    grade: 0,                   // 选择学期
    majorId: undefined,         // 选择专业
    pageNo: 0,
    pageSize: 20
})

const sfText = computed(() => {
    return queryData.value.memberType == 1 ? '教师' : '学生';
})
const zyCount = ref<number>(0)

// 专业数据
const zyListData = ref<Array<any>>([])
// 课程统计数据
const dateRange = ref<any>()
const kcListData = ref<Array<any>>([])
// 列表数据
const listData = ref<Array<any>>([])
// 列表专业列表数据
const majors = ref<Array<any>>([])

// 切换学校
const changeSchool = async (schoolId: any) => {
    await getRangeTime(schoolId);
    reloadPageData();
}

// 切换身份
const changeType = (index) => {
    queryData.value.memberType = index;
    queryData.value.grade = 0;
    reloadPageData();
}

// 切换年级
const changeGrade = (index) => {
    queryData.value.grade = index;
    reloadPageData();
}

// 切换专业
const changeMajor = (item) => {
    queryData.value.majorId = item.id;
    getMemberData();
}

// 搜索学校名称
const schoolOptions = ref<Array<any>>([])

async function schoolOptionsInit() {
    schoolOptions.value = await schoolApi.getSimpleList();
    queryData.value.schoolId = schoolOptions.value[0]?.id;
}

function getTermLabel(grade, term) {
    // 根据 grade 和 term 生成学期标签
    let gradeLabel = '';
    switch (grade) {
        case 1:
            gradeLabel = '大一';
            break;
        case 2:
            gradeLabel = '大二';
            break;
        case 3:
            gradeLabel = '大三';
            break;
        case 4:
            gradeLabel = '大四';
            break;
        case 5:
            gradeLabel = '已毕业';
            break;
        default:
            gradeLabel = '未知';
    }

    let termLabel = '';
    if (grade == 5) return gradeLabel;
    switch (term) {
        case 1:
            termLabel = '(上)';
            break;
        case 2:
            termLabel = '(下)';
            break;
        default:
            termLabel = '未知';
    }
    return gradeLabel + termLabel;
}

const handleSizeChange = () => {
    getMemberData();
}
const handleCurrentChange = () => {
    getMemberData();
}

const rowCellStyle = () => {
    return {
        backgroundColor: '#FFF',
        color: 'rgba(100, 98, 102, 1)',
        borderBottom: '1px solid #F0F2F5',
    }
}

const rowState = () => {
    return {
        backgroundColor: '#FFF',
        color: 'rgba(100, 98, 102, 1)',
        border: 'none !important',
    }
}

const headerRowStyle = () => {
    return {
        backgroundColor: '#EBEEF5 !important',
        color: 'rgba(100, 98, 102, 1)',
        fontWeight: 'normal',
        border: 'none',
    }
}

//TODO--------------------------------------------------------------------------
const initWeek = (start, end) => {
    // 定义开始日期和结束日期
    const startDate = dayjs(start);
    const endDate = dayjs(end);

    // 存储自然周范围的数组
    const weekRanges = [];

    // 找到第一个自然周的开始日期
    let currentWeekStart = startDate.startOf("week");
    if (currentWeekStart.isBefore(startDate, "day")) {
        weekRanges.push(
            `${startDate.format("M.D")}-${currentWeekStart.add(6, "d").format("M.D")}`
        );
        currentWeekStart = currentWeekStart.add(7, "d");
    }

    // 使用循环生成自然周范围
    while (
        currentWeekStart.isBefore(endDate) ||
        currentWeekStart.isSame(endDate)
        ) {
        const currentWeekEnd = currentWeekStart.endOf("week"); // 找到当前自然周的结束日期
        if (endDate.isBefore(currentWeekEnd, "day")) {
            weekRanges.push(
                `${currentWeekStart.format("M.D")}-${endDate.format("M.D")}`
            );
        } else {
            weekRanges.push(
                `${currentWeekStart.format("M.D")}-${currentWeekEnd.format("M.D")}`
            );
        }

        currentWeekStart = currentWeekEnd.add(1, "day"); // 移动到下一周的开始日期
    }

    return weekRanges.map((v) => ({weekName: v, courseCount: 0}));
};

const zysjChart = ref<any>(null);
let myZysjChart;
const myZysjChartInit = () => {
    myZysjChart = echarts.init(zysjChart.value);
    myZysjChart.setOption(myZysjChartInitOption());
}
const myZysjChartInitOption = () => {
    const data = [];
    for (let i = 1; i < majors.value.length; i++) {
        data.push({majorName: majors.value[i].name, memberCount: 0});
    }

    if (zyListData.value.length && data.length) {
        for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < zyListData.value.length; j++) {
                if (data[i].majorName == zyListData.value[j].majorName) {
                    data[i].memberCount = zyListData.value[j].memberCount;
                }
            }
        }
    }

    const hasDataZoom = data.length > 7;

    return {
        grid: {
            show: false,
            borderColor: 'rgba(240, 242, 245, 0.45)',
            top: '12%',
            left: '11%',
            width: '83%',
            height: '75%',
        },
        xAxis: {
            type: 'category',
            data: data.map(v => v.majorName),
            axisLabel: {
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置横坐标文字颜色
                },
                interval: 0,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)'
                }
            },
            axisTick: {
                show: true,
            },
        },
        dataZoom: hasDataZoom ? [
            {
                type: 'slider', // 滑动条型 dataZoom
                left: '10%',
                top: '95%',
                height: '3%',
                start: 0, // 数据窗口的起始位置，范围从 0 到 100
                end: parseInt(700 / data.length), // 数据窗口的结束位置，范围从 0 到 100
                filterMode: 'filter', // 过滤模式，可以是 'filter' 或 'empty'，'filter' 表示窗口内的数据会被保留，'empty' 表示窗口内的数据会被过滤掉
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置文本颜色
                },
            },
        ] : [],
        yAxis: {
            type: 'value',
            show: true,
            axisLabel: {
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置横坐标文字颜色
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)'
                }
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)' // 自定义网格线颜色
                }
            },
        },
        series: [
            {
                data: data.map(v => v.memberCount),
                type: 'bar',
                symbol: 'circle', // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                barWidth: 20, // 设置坐标点大小
                barGap: '200%',
                barCategoryGap: '200%',
                lineStyle: {
                    color: 'rgba(68, 213, 181, 1)',
                },
                itemStyle: {
                    color: 'rgba(68, 213, 181, 1)', // 设置折线的横线颜色
                },
                label: {
                    show: false,
                }
            }
        ]
    }
}
const myZysjChartUpdate = () => {
    myZysjChart.setOption(myZysjChartInitOption());
}

const kcsjChart = ref<any>(null);
let myKcsjChart;
const myKcsjChartInit = () => {
    myKcsjChart = echarts.init(kcsjChart.value);
    myKcsjChart.setOption(myKcsjChartInitOption());
}
const myKcsjChartInitOption = () => {
    const data = initWeek(dateRange.value.start, dateRange.value.end);
    if (kcListData.value.length) {
        for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < kcListData.value.length; j++) {
                if (data[i].weekName == kcListData.value[j].weekName) {
                    data[i].courseCount = kcListData.value[j].courseCount;
                }
            }
        }
    }

    const hasDataZoom = data.length > 7;

    return {
        grid: {
            show: false,
            borderColor: 'rgba(240, 242, 245, 0.45)',
            top: '12%',
            left: '11%',
            width: '83%',
            height: '75%',
        },
        xAxis: {
            type: 'category',
            data: data.map(v => v.weekName),
            axisLabel: {
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置横坐标文字颜色
                },
                interval: 0,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)'
                }
            },
            axisTick: {
                show: true,
            },
        },
        dataZoom: hasDataZoom ? [
            {
                type: 'slider', // 滑动条型 dataZoom
                left: '10%',
                top: '95%',
                height: '3%',
                start: 0, // 数据窗口的起始位置，范围从 0 到 100
                end: parseInt(700 / data.length), // 数据窗口的结束位置，范围从 0 到 100
                filterMode: 'filter', // 过滤模式，可以是 'filter' 或 'empty'，'filter' 表示窗口内的数据会被保留，'empty' 表示窗口内的数据会被过滤掉
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置文本颜色
                },
            },
        ] : [],
        yAxis: {
            type: 'value',
            show: true,
            axisLabel: {
                textStyle: {
                    color: 'rgba(144, 147, 153, 1)' // 设置横坐标文字颜色
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)'
                }
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: 'rgba(240, 242, 245, 0.45)' // 自定义网格线颜色
                }
            },
        },
        series: [
            {
                data: data.map(v => v.courseCount),
                type: 'line',
                smooth: true,
                symbol: 'circle', // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                symbolSize: 8, // 设置坐标点大小
                lineStyle: {
                    color: 'rgba(46, 200, 237, 1)',
                },
                itemStyle: {
                    color: 'rgba(255, 255, 255, 1)',
                    borderColor: 'rgba(46, 200, 237, 1)',
                    borderWidth: 3,
                },
                label: {
                    show: true,
                    textStyle: {
                        color: 'rgba(46, 200, 237, 1)' // 设置横坐标文字颜色
                    }
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(46, 200, 237, 0.80)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(46, 200, 237, 0)'
                        }
                    ])
                }
            }
        ]
    }
}
const myKcsjChartUpdate = () => {
    myKcsjChart.setOption(myKcsjChartInitOption());
}

watch(zyListData, () => {
    myZysjChartUpdate();
}, {deep: true});

watch(kcListData, () => {
    myKcsjChartUpdate();
}, {deep: true});

async function reloadPageData() {
    // 上方图标数据
    getCourseData()
    // 下方列表数据
    getMajorList();
    getMemberData();
}

async function getMajorData() {
    const majorLook = await courseApi.getMajorLook(queryData.value);
    zyListData.value = majorLook.majorList;
    zyCount.value = majorLook.memberCount;
}

async function getCourseData() {
    kcListData.value = await courseApi.getCourseLook(queryData.value);
}

async function getMajorList() {
    const majorList = await courseApi.getMajorList();
    majors.value = union([{id: 0, name: "全部"}], majorList);
    queryData.value.majorId = 0;

    getMajorData();
}

async function getMemberData() {
    const memberListLook = await courseApi.getMemberList(queryData.value);
    listData.value = memberListLook.list;
    total.value = memberListLook.total;
}

onMounted(async () => {
    await schoolOptionsInit();
    await getRangeTime(queryData.value.schoolId);

    myZysjChartInit();
    myKcsjChartInit();

    reloadPageData();
})

async function getRangeTime(schoolId: any) {
    if(schoolId) dateRange.value = await schoolApi.getDateRange(schoolId);
}

onUnmounted(() => {
    dispose();
});
// 销毁图表
const dispose = () => {
    myZysjChart.dispose();
    myKcsjChart.dispose();
}
</script>
<style lang="scss" scoped>
::v-deep {
    html {
        font-size: calc(100vh / 1010);
    }
}

.eloption .el-select-dropdown__wrap {
    background-color: bisque !important;
    max-height: 350px !important;
}

.custom-input {

    :deep(.el-input__wrapper) {
        height: 100%;
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;

        .el-input__inner {
            color: rgba(144, 147, 153, 1);
            font-size: 14rem;
            height: 40rem;
        }
    }

    :deep(.el-input__inner::placeholder) {
        color: rgba(144, 147, 153, 1);
        font-size: 14rem;
    }

}

.wrap {
    width: calc(100% - 60rem);
    padding: 30rem 0 30rem 40rem;
    background-color: rgba(240, 242, 245, 1);
    overflow: hidden;

    .top {
        width: 1652rem;
        height: 40rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .sel-data {
            height: 34rem;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;

            .js {
                font-size: 15rem;
                font-weight: bold;
                color: #303133;
                line-height: 34rem;
                margin-left: 10rem;
                cursor: pointer;
            }

            .xs {
                font-size: 15rem;
                font-weight: bold;
                color: #303133;
                line-height: 34rem;
                margin-left: 42rem;
                margin-right: 42rem;
                cursor: pointer;
            }

            .active {
                color: rgba(25, 137, 250, 1);
                border-bottom: 1rem solid rgba(25, 137, 250, 1);
            }

        }

        .xyname,
        .ssdq {
            height: 16rem;
            margin-right: 20rem;
            font-size: 16rem;
            line-height: 16rem;
            color: rgba(96, 98, 102, 1);
        }

        .xysearch {
            width: 240rem;
            height: 40rem;
            margin-right: 20rem;
            background: #FFFFFF;
            border-radius: 4rem 4rem 4rem 4rem;
            opacity: 1;
            border: 1rem solid #DCDFE6;

            :deep(.el-select__input) {
                color: rgba(144, 147, 153, 1);
            }

            :deep(.el-input) {
                width: 240rem;
                height: 40rem;
            }

        }

        .dqsearch {
            width: 160rem;
            height: 40rem;
            margin-right: 42rem;
            background: #FFFFFF;
            border-radius: 4rem 4rem 4rem 4rem;
            opacity: 1;
            border: 1rem solid #DCDFE6;
        }

        .sel-grade {
            flex: 1;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: flex-end;
            margin-right: 1rem;

            .grade {
                width: 90rem;
                height: 36rem;
                background: rgba(255, 255, 255, 1);
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
                border-top: 1rem solid #A3D0FD;
                border-bottom: 1rem solid #A3D0FD;
                border-left: 1rem solid #A3D0FD;
                font-size: 14rem;
                font-weight: bold;
                color: rgba(48, 49, 51, 1);
                line-height: 36rem;
                text-align: center;
                cursor: pointer;
            }

            .active {
                color: rgba(25, 137, 250, 1);
                background: #E6F1FC;
            }
        }
    }

    .middle {
        width: 1652rem;
        padding-top: 17rem;
        position: relative;
        display: flex;
        flex-flow: row nowrap;

        .zytitle {
            height: 20rem;
            font-size: 20rem;
            font-weight: bold;
            color: rgba(48, 49, 51, 1);
            line-height: 20rem;
            position: absolute;
            top: 30rem;
            left: 30rem;

        }

        .zynum {
            font-size: 15rem;
            color: rgba(48, 49, 51, 1);
            line-height: 20rem;
            position: absolute;
            top: 30rem;
            right: 30rem;

            span {
                font-weight: bold;
                font-size: 20rem;
                color: rgba(68, 213, 181, 1);
            }
        }

        .zysj {
            width: 736rem;
            height: 361rem;
            background: #FFFFFF;
            border-radius: 15rem 15rem 15rem 15rem;
            opacity: 1;
            position: relative;

            .zysj-chart {
                width: 736rem;
                height: 301rem;
                position: absolute;
                top: 60rem;
            }

        }

        .kctj {
            width: 896rem;
            height: 361rem;
            background: #FFFFFF;
            border-radius: 15rem 15rem 15rem 15rem;
            opacity: 1;
            position: relative;
            margin-left: 20rem;

            .kctj-chart {
                width: 896rem;
                height: 311rem;
                position: absolute;
                top: 50rem;
            }
        }
    }

    .bottom {
        width: 1652rem;
        padding-top: 30rem;
        position: relative;

        .btitle {
            height: 20rem;
            font-size: 20rem;
            font-weight: bold;
            color: #303133;
            line-height: 20rem;
        }

        .btlist {
            width: 1652rem;
            height: 464rem;
            margin-top: 20rem;
            background: #FFFFFF;
            border-radius: 15rem;
            opacity: 1;
            position: relative;

            .btlist-wrap {
                width: 100%;
                height: 374rem;

                .zy-list {
                    width: 1592rem;
                    position: absolute;
                    top: 24rem;
                    left: 30rem;

                    .zy-warp{
                        height: 100%;
                        display: flex;
                        flex-flow: row nowrap;
                        overflow-x: scroll;
                        color: #303133;

                        .item {
                            height: 33rem;
                            font-size: 15rem;
                            font-weight: bold;
                            text-align: center;
                            line-height: 33rem;
                            margin-right: 42rem;
                            white-space: nowrap;
                        }
                    }

                    .active {
                        color: rgba(25, 137, 250, 1);
                        border-bottom: 1px solid rgba(25, 137, 250, 1);
                    }
                }

                // /* .zy-warp元素内的滚动条样式 */
                // .zy-warp::-webkit-scrollbar {
                //     width: 8px; /* 滚动条宽度 */
                // }

                // .zy-warp::-webkit-scrollbar-thumb {
                //     background-color: rgba(25, 137, 250, .2); /* 滚动条滑块颜色 */
                //     border-radius: 4px; /* 滚动条滑块圆角 */
                // }

                // .zy-warp::-webkit-scrollbar-track {
                //     background-color: rgba(25, 137, 250, 0); /* 滚动条轨道颜色 */
                // }

                .data-list {
                    width: 1592rem;
                    height: 304rem;
                    position: absolute;
                    top: 70rem;
                    left: 28rem;
                    display: flex;
                    flex-flow: column nowrap;
                    overflow: hidden;

                    :deep(.el-table) {
                        --el-table-border-color: rgba(0, 0, 0, 0) !important;
                    }

                    .data-title {
                        width: 1592rem;
                        height: 50rem;
                        background: #EBEEF5;
                        display: flex;
                        flex-flow: row nowrap;

                        .title {
                            height: 50rem;
                            flex: 1;
                            height: 16rem;
                            font-size: 50rem;
                            line-height: 50rem;
                            font-weight: bold;
                            color: #646266;
                        }
                    }

                    .item {
                        width: 1592rem;
                        height: 134rem;
                        border-radius: 6rem;
                        margin-bottom: 12rem;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: relative;

                        .room {
                            height: 50rem;
                            font-size: 16rem;
                            line-height: 50rem;
                            font-weight: bold;
                            color: #01474F;

                            span {
                                height: 14rem;
                                font-size: 14rem;
                                font-weight: bold;
                                color: #468889;
                            }
                        }
                    }
                }
            }

            .bottom-page {
                width: 100%;
                height: 30rem;
                margin-top: 22rem;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                justify-content: center;

                :deep(.el-pagination) {
                    width: 800rem;
                    height: 100%;
                    color: rgba(96, 98, 102, 1);

                    .el-pagination__total {
                        color: rgba(96, 98, 102, 1);
                        font-size: 14rem;

                    }

                    .el-input__inner {
                        height: 28rem;
                    }

                    .btn-prev {
                        width: 30rem;
                        height: 30rem;
                        background: #F0F2F5;
                        border-radius: 2rem 2rem 2rem 2rem;
                        opacity: 1;

                        .el-icon {
                            color: #606266;
                        }
                    }

                    .btn-next {
                        width: 30rem;
                        height: 30rem;
                        background: #F0F2F5;
                        border-radius: 2rem 2rem 2rem 2rem;
                        opacity: 1;

                        .el-icon {
                            color: #606266;
                        }
                    }

                    .el-pager li {
                        min-width: 30rem; //一定要加！不然默认的宽度是32px
                        width: 30rem;
                        height: 30rem;
                        font-size: 14rem;
                        font-weight: bold;
                        border-radius: 4rem;
                        color: rgba(96, 98, 102, 1); //字体颜色
                        background: #F0F2F5; //背景色
                        line-height: 30rem;
                        margin: 0 10rem;

                        &.active {
                            //选中时字体颜色、背景色变化
                            color: rgba(255, 255, 255, 1);
                            background: #1989FA;
                        }
                    }

                    .el-pager .is-active {
                        color: rgba(255, 255, 255, 1);
                        background: #1989FA;
                    }

                    .el-pagination__jump .el-pagination__goto {
                        color: rgba(96, 98, 102, 1);
                    }

                    .el-pagination__jump .el-pagination__classifier {
                        color: rgba(96, 98, 102, 1);
                    }

                }

                :deep(.el-input__wrapper) {
                    height: 100%;
                    border: 1rem solid #DCDFE6;
                    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
                    cursor: default;

                    .el-input__inner {
                        color: rgba(96, 98, 102, 1);
                    }
                }
            }
        }
    }

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
